<!--
 * 单元格组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <view class="badges">
                <pure-badge value="NEW" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 主题徽标 -->
        <app-demo-module title="主题徽标">
            <view class="badges">
                <pure-badge value="内置主题" theme="primary" :absolute="false"></pure-badge>
                <pure-badge value="内置主题" theme="success" :absolute="false"></pure-badge>
                <pure-badge value="内置主题" theme="danger" :absolute="false"></pure-badge>
                <pure-badge value="内置主题" theme="warning" :absolute="false"></pure-badge>
                <pure-badge value="内置主题" theme="info" :absolute="false"></pure-badge>
                <pure-badge value="自定义中国红主题" theme="--app-theme-china-red" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 幽灵徽标 -->
        <app-demo-module title="幽灵徽标">
            <view class="badges">
                <pure-badge ghost value="幽灵徽标" theme="primary" :absolute="false"></pure-badge>
                <pure-badge ghost value="幽灵徽标" theme="success" :absolute="false"></pure-badge>
                <pure-badge ghost value="幽灵徽标" theme="danger" :absolute="false"></pure-badge>
                <pure-badge ghost value="幽灵徽标" theme="warning" :absolute="false"></pure-badge>
                <pure-badge ghost value="幽灵徽标" theme="info" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 镂空徽标 -->
        <app-demo-module title="镂空徽标">
            <view class="badges">
                <pure-badge plain value="镂空徽标" theme="primary" :absolute="false"></pure-badge>
                <pure-badge plain value="镂空徽标" theme="success" :absolute="false"></pure-badge>
                <pure-badge plain value="镂空徽标" theme="danger" :absolute="false"></pure-badge>
                <pure-badge plain value="镂空徽标" theme="warning" :absolute="false"></pure-badge>
                <pure-badge plain value="镂空徽标" theme="info" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 圆点模式 -->
        <app-demo-module title="圆点模式">
            <view class="badges">
                <pure-badge mode="dot" value="内置主题" theme="primary" :absolute="false"></pure-badge>
                <pure-badge mode="dot" value="内置主题" theme="success" :absolute="false"></pure-badge>
                <pure-badge mode="dot" value="内置主题" theme="danger" :absolute="false"></pure-badge>
                <pure-badge mode="dot" value="内置主题" theme="warning" :absolute="false"></pure-badge>
                <pure-badge mode="dot" value="内置主题" theme="info" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 溢出模式 -->
        <app-demo-module title="溢出模式" desc="溢出模式时如果设置的值超多了最大值，会显示为'设置的最大值加后缀'">
            <view class="badges">
                <pure-badge mode="overflow" value="1" theme="primary" :absolute="false"></pure-badge>
                <pure-badge mode="overflow" value="10" theme="success" :absolute="false"></pure-badge>
                <pure-badge mode="overflow" value="80" theme="danger" :absolute="false"></pure-badge>
                <pure-badge mode="overflow" value="99" theme="warning" :absolute="false"></pure-badge>
                <pure-badge mode="overflow" value="200" theme="info" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 切割模式 -->
        <app-demo-module title="切割模式" desc="切割模式时如果设置的值超多了最大值，会显示为'值除以最大值加后缀'">
            <view class="badges">
                <pure-badge mode="limit" :max="1000" suffix="k" value="1" theme="primary" :absolute="false"></pure-badge>
                <pure-badge mode="limit" :max="1000" suffix="k" value="100" theme="success" :absolute="false"></pure-badge>
                <pure-badge mode="limit" :max="1000" suffix="k" value="1000" theme="danger" :absolute="false"></pure-badge>
                <pure-badge mode="limit" :max="1000" suffix="k" value="1500" theme="warning" :absolute="false"></pure-badge>
                <pure-badge mode="limit" :max="1000" suffix="k" value="15000" theme="info" :absolute="false"></pure-badge>
            </view>
        </app-demo-module>

        <!-- 显示位置 -->
        <app-demo-module title="显示位置" desc="默认absolute显示在右上角，top 为 0，right 为 0">
            <view class="blocks">
                <view class="block">
                    <pure-badge value="NEW" theme="danger"></pure-badge>
                </view>
                <view class="block">
                    <pure-badge ghost value="NEW" theme="danger"></pure-badge>
                </view>
                <view class="block">
                    <pure-badge plain value="NEW" theme="danger"></pure-badge>
                </view>
                <view class="block">
                    <pure-badge mode="dot" theme="danger"></pure-badge>
                </view>
                <view class="block">
                    <pure-badge mode="overflow" :max="1000" value="15000" theme="danger"></pure-badge>
                </view>
                <view class="block">
                    <pure-badge mode="limit" :max="1000" suffix="k" value="15000" theme="danger"></pure-badge>
                </view>
            </view>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss">
    .badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        flex-direction: row;
        margin-top: 10px;
        --app-theme-china-red: #ff0000;
    }

    .blocks {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        flex-direction: row;
        margin-top: 10px;
    }

    .block {
        width: 80px;
        height: 80px;
        position: relative;
        background: #f8f8f8;
        border-radius: 5px;
    }
</style>
